import { ScrollView, View, Text, Image } from '@tarojs/components';
import React, { Component } from 'react';
import Taro, { getCurrentInstance } from '@tarojs/taro';
import { connect } from 'react-redux';
import './index.less';
import * as T from './types';
import actions from './actions';
import { store2Props } from './selectors';
import bgImg from '@/assets/image/asc/asc_bg.png'

actions().actions.loadReducer();
// @ts-ignore
@connect<Partial<T.IProps>, any>(store2Props, actions)
export default class Index extends Component<Partial<T.IProps>, any> {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() { }

  componentDidShow() {
    this.props.actions.init()
  }

  componentWillUnmount() {
    this.props.actions.clean();
  }

  // 工具栏
  getToolsBox() {
    let {
      main: { ascData },
      actions: { action },
    } = this.props;
    let toolsView = [];
    ascData.map((item, index) => {
      toolsView.push(
        <View style={{ paddingBottom: '20px' }}>
          <Text className='title'>{item.title}</Text>
          <View className='toolsBox'>{this.Tools(item.applications)}</View>
        </View>,
      );
    });
    return toolsView;
  }

  Tools(list) {
    let ViewItem = [];
    list.map((item, index) => {
      ViewItem.push(
        <View
          className='item'
          onClick={() => {
            Taro.setStorageSync('url', item.router)
            Taro.navigateTo({
              url: '/pages/package-A/webview/index'
            })
          }}
        >
          <Image className='img' src={item.imgUrl} />
          <Text className='tit'>{item.name}</Text>
        </View>,
      );
    });
    return ViewItem;
  }

  render() {
    return (
      <ScrollView className="packageAGS" scrollY>
        <Image src={bgImg} className='banner' mode="widthFix" />
        <Text className='topTitle'>全部服务</Text>
        <View className='List'>{this.getToolsBox()}</View>
      </ScrollView>
    );
  }
}
